<template>
  <div class="search">
     <div class="search-title">
       <text class="iconfont icon-zuojiantou" @click="goHome"></text>
       <input type="text" placeholder=胡歌 v-model="keys" @input="historyKeys">
     </div>
     <div class="search-histoty-body" v-if="showss">
        <div class="search-body">
       <text>历史</text>
       <text class="iconfont icon-shanchu" @click="deleteList"></text>
     </div>
     <div class="search-history" >
       <text v-for="(i,index) in keysList" :key="index">{{i}}</text>
     </div>
     </div>
     <!-- 搜索列表详情 -->
     <div class="search-searchlist" v-for="(i,index) in searchList" :key="index" v-else @click="addDetail(i,index)">
       <div class="searchlist-left">{{index+1}}</div>
       <div class="searchlist-body">
         <text>{{i.name}}</text>
         <text>{{i.ar[0].name}}</text>
       </div>
       <div class="searchlist-right">
         <text class="iconfont icon-liebiao"></text>
       </div>
     </div>
     <music-buttom></music-buttom>
  </div>
</template>

<script>
import {ref,reactive,onMounted} from 'vue'
import {useStore} from 'vuex'
import {useRouter} from 'vue-router'
import {getSearch} from '@/axios/api/home.js'
export default {
  setup(){
   let keys = ref('')
   let showss = ref(true)
   let searchList = ref([])
   let keysList=ref([])
   const store = useStore()
   const router = useRouter()
   function goHome(){
     router.push('/')
   }
   onMounted(()=>{
    if(JSON.parse(localStorage.getItem('items')!==null)){
       keysList.value= JSON.parse(localStorage.getItem('items'))
    }

   })
   function deleteList(){
   localStorage.removeItem('items')
   keysList.value=[]
   }
    function historyKeys(){
      clearTimeout(this.timer)
      if(keys.value!==''){     
      this.timer =  setTimeout( async ()=>{
        keysList.value.unshift(keys.value) 
        keysList.value = [...new Set(keysList.value)];
       localStorage.setItem('items',JSON.stringify(keysList.value))
  
       let res = await getSearch(keys.value)
       if(res.data.code==200){
          showss.value = false;
         searchList.value=res.data.result.songs
       }
     },500)

      }
     else{
      showss.value = true;

     }
      
    }
    function addDetail(i,index){
        
          store.commit('ADDSearch',searchList.value)
          store.commit('UPDATAINDEX',index)
    }
   return {goHome,keys,keysList,deleteList,historyKeys,searchList,showss,addDetail}
  }
}
</script>

<style lang="less">
.search{  

   .search-title{
     display: flex;
    align-items: center;
     height:1rem;

      text{
        display: inline-block;
        font-size: 0.56rem;
      }
      input{
         width:100%;
          margin-left:0.2rem;
          border: none;
          border-bottom: 0.01rem solid black;
      }
   }
   .search-body{
     display:flex;
     justify-content: space-between;
     text:nth-child(1){
       font-size: 0.32rem;
       font-weight: 600;
       margin-left:0.2rem;
     }
     text:nth-child(2){
       font-size: 0.32rem;
       font-weight: 600;
       margin-right:0.2rem;
     }
   }
   .search-history{
     margin-top:0.1rem;
      text{
        // background: pink;
        margin-left: 0.1rem;
        background: pink;
        border-radius: 0.2rem;
      }
   }
   .search-searchlist{
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-top:0.1rem;
     height:1rem;
     border-bottom: 0.01rem solid rgb(206, 202, 202);
     .searchlist-left{
       margin-left:0.3rem;
       font-size: 0.40rem;
     }
     .searchlist-body{
        width:5.6rem;
       text{
         display: block;
       }
       text:nth-child(1){
         font-weight: 600;
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
       }
       text:nth-child(2){
         font-size: 0.26rem;
         color:rgb(82, 79, 79);
       }
     }
     .searchlist-right{
        margin-right:0.3rem;

        text{
          font-size: 0.50rem;
        }
     }
   }
}
</style>